<template>
    <div class="M-H-root">
        <BackHeader :search-show="false">历史记录</BackHeader>
        <h4 class="title-dot">最 近</h4>
        <!--最近阅读-->
        <div>
            <BookrackCell v-for="b,i in books" :key="i" :book="b" class="book-item"></BookrackCell>
        </div>
        <h4 class="title-dot">一周前</h4>
        <!--一周前-->
        <div>
            <BookrackCell v-for="b,i in books" :key="i" :book="b" class="book-item"></BookrackCell>
        </div>
        <h4 class="title-dot">更 早</h4>
        <!--更 早-->
        <div>
            <BookrackCell v-for="b,i in books" :key="i" :book="b" class="book-item"></BookrackCell>
        </div>
    </div>
</template>

<script>
    import BackHeader from "../components/BackHeader.vue";
    import BookrackCell from "../components/BookrackCell.vue";
    import {mapState} from "vuex";

    export default {
        name: "MineHistories",
        components: {
            BackHeader,
            BookrackCell
        },
        computed:{
            ...mapState(["books"])
        },
        mounted(){
            this.$store.dispatch("getBooks")
        }
    }
</script>

<style scoped lang="less">
    .M-H-root {
        padding: 0 @s29;
        height: 100vh;
    }
    .book-item{
        display: inline-block;
        margin-right: 10.1vw;
    }
    .book-item:nth-of-type(3n){
        margin-right: 0;
    }
</style>